<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*
#rounded-box {
  width: 200px;
  height: 100px;
  border-radius: 10px;
  background-color: lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
}
*/

/* ä¸€ç•ªå¤–ã®æž&nbsp; */
.white-freme{
  width: 100%;                /* æ¨ªå¹… */
  max-width: 900px; 
  height: 100%;               /* é«˜ã• */
  border: 3px solid  white;     /* ç™½ã„æž&nbsp;ç·šï¼ˆèƒŒæ™¯ã¨åŒã˜ã§ã‚‚OKï¼‰ */
 
  margin: 30px auto 50vh auto;  /* ä¸Šä¸‹ä½™ç™½ã‚‚ãƒ‘ãƒ¼ã‚»ãƒ³ãƒˆã«ã—ã¦æŸ”è»Ÿã« */
  box-sizing: border-box;     /* ãƒ‘ãƒ‡ã‚£ãƒ³ã‚°ã‚„ãƒœãƒ¼ãƒ€ãƒ¼ã‚’å«ã‚ãŸã‚µã‚¤ã‚ºåˆ¶å¾¡ */
  overflow: visible;  /* è¦ªè¦ç´&nbsp;ã«ã“ã‚Œã‚’æ–½ã™ã¨ã€å­è¦ç´&nbsp;ã®floatã®å½±éŸ¿ã‚’å›žé¿ã§ãã‚‹ */
}

/*
.white-freme2
{
  width: 100%;         
  max-width: 900px; 
  height: 100%;             
  border:double 3px white;  
  margin: auto auto 50vh auto; 
  box-sizing: border-box;    
  overflow: visible;  
}
*/

/* è¦‹å‡ºã— */
.white-freme h1{
  padding-left: 20px;
}
.line_s
{
  margin: 0;
  border: none;
  border-top: 1px solid #ccc; /*???*/
  border-top-width: 2px;
  border-top-color: #ffffff;
}

/*** ç”»åƒã¨æ–‡å­—ã®è¡¨ã®éƒ¨åˆ† ***/
.GAMES_images_s {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* æ¨ªã«2ã¤ä¸¦ã¹ã‚‹ */
  max-width: 1500px;  /* å¿…è¦ã«å¿œã˜ã¦èª¿æ•´ */
  margin: 0 auto;
}

/* 1ç­åˆ†ã®å›²ã‚€æž&nbsp;ã‚’å®šç¾© --- ã“ã®éƒ¨åˆ†ã§hoveråˆ¤å®š */
.game-wrapper {
  display: contents; /* ã‚°ãƒªãƒƒãƒ‰ä¸Šã¯å¹²æ¸‰ã•ã›ãªã„ãŒJS/CSSã§ã¯1å˜ä½ã¨ã—ã¦æ‰±ã† */
  position: relative;
}
/* å·¦å³ã«åˆ†å‰² */
.game-wrapper:hover &gt; a {
  height: auto;
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
  box-shadow: none !important;
  filter: none !important;
}
/* aã‚¿ã‚°ã®å‡¦ç†å›žé¿ */
a.no-hover:not(.team02_block) {
  background: none !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: default !important;
  border: 0.1vw solid #ffffff;
  height: 37.0vw;
  /*transition: height 2s ease;*/

  /* ä¸Šä¸‹ä¸­å¤®æƒãˆ */
  position: relative;
}
a.no-hover.team02_block {
  background: none !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: default !important;
  border: 0.1vw solid #ffffff;
  height: 45.0vw;
  /*transition: height 2s ease;*/

  /* ä¸Šä¸‹ä¸­å¤®æƒãˆ */
  position: relative;
}



/** å·¦å´ **/
.img-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  /* position: relative; */
  overflow: hidden;
  
  /*transition: height 3s ease;*/

  /* ä¸Šä¸‹ä¸­å¤®æƒãˆ */
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.game-wrapper:hover .img-wrapper {
  height: 37.0vw;

  position: relative;
  top:50%;
  transform: translate(0, -50%);
}
/* ç”»åƒè¨­å®š */
.GAMES_image_s { 
  width: 100%;
  /* height: auto; */
  max-width: 400px;
  transform: none !important;
  scale: 1 !important;
  transition: none !important;

    /* ä¸Šä¸‹ä¸­å¤®æƒãˆ */
    top: -50%;
    transform: translate(0, -50%);
}
.game-wrapper:hover .GAMES_image_s {
  display: none;
}

/* å‹•ç”»è¨­å®š */
.hover-video{ 
  display: none !important;
  position: absolute;
  
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  z-index: 1;
  pointer-events: none; /* ãƒžã‚¦ã‚¹æ“ä½œã‚’ç„¡åŠ¹åŒ– */
}
.game-wrapper:hover .hover-video
{
  display: block !important;  /* å¯è¦–åŒ– */
  height: 90%;
  width: 100%;
  object-fit: contain;
}


/** å³å´ **/
.genre { /* ã‚¸ãƒ£ãƒ³ãƒ« */
  font-size: 30px;
  color: #ccc;
  padding-left: 1vw;
}
.tyuuou{ /* ä¸­å¤®ãžã‚ãˆ */
  display: flex;
  align-items: center;     /* åž‚ç›´æ–¹å‘ã«ä¸­å¤®æƒãˆ */
  height: 85%;

  padding-left: 1vw;
  padding-right: 1vw;
}
.title { /* ã‚²ãƒ¼ãƒ&nbsp;ã‚¿ã‚¤ãƒˆãƒ« */
  font-size: 40px;
  font-weight: bold;
  text-align: left;
}
.catch-copy { /* ã‚­ãƒ£ãƒƒãƒã‚³ãƒ”ãƒ¼ */
  /* padding: 40px; */ 

  padding-top: 2vw;
  padding-left: 0;
  /* display: none; */ /* â†è¡¨ç¤ºã—ãªã„ã‚’ã—ãªã„ */
  justify-content: center;
  
  color: #ccc;
  font-size: 30px;
  font-weight: bold;
}
.button_g{
  display: block;
  justify-content: center;
    margin: auto 0 0 auto; /* å³ä¸‹æƒãˆ */
    width: 200px;
    height: 50px;
    background-color: white;
    box-shadow: 2px 2px 2px #c6d361;
    border-radius: 10px;
    border: none;
    top: 100%; /* åŠ¹æžœã¯ãªã„ã‚ˆã†ã&nbsp; */
    transform: translate(0, -80%);
}
.button_g &gt; div { /* ãƒœã‚¿ãƒ³å†…ãƒ†ã‚­ã‚¹ãƒˆ */
    color: black;
    font-family: 'Font_Chalk';
}
.buttontext {
  font-size: 20px;
}
.buttontext-open {
  display: none;
  font-size: 18px;
  
  /* ä¸‹ç·š */
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.game-wrapper:hover .button_g {
  transform: translate(180%, -100%); /* ä¸‹ç«¯ã«è»¸ã‚’ç§»å‹• */
}
.game-wrapper:hover .buttontext {
  display: none;
}
.game-wrapper:hover .buttontext-open {
  color: #1900ff;
  display: block !important;  /* å¯è¦–åŒ– */
}
.game-wrapper:hover .catch-copy {
  display: block !important;  /* å¯è¦–åŒ– */
}

/* ã‚¹ãƒžãƒ›ç”¨ãƒœã‚¿ãƒ³æŒ™å‹•ï¼ï¼ï¼ï¼šJSã§è¿½åŠ&nbsp;ã•ã‚Œã‚‹ã‚¯ãƒ©ã‚¹ã§åˆ‡ã‚Šæ›¿ãˆ */
.button_g.show-alt .buttontext {
  display: none;
}
.button_g.show-alt .buttontext-open {
  display: block !important;
  color: #1900ff;
}

@media screen and (max-width: 1068px) {
  .white-freme {
    width: 90%;         /* ã‚¹ãƒžãƒ›ç”¨ã«å¹…ã‚’åºƒã’ã™ãŽãªã„ */
    max-width: none;    /* PCç”¨ã®max-widthåˆ¶é™ã‚’è§£é™¤ */
    margin: auto auto 200px auto;  /* ä¸Šä¸‹ã®ãƒžãƒ¼ã‚¸ãƒ³ã‚‚å°‘ã—èª¿æ•´ï¼ˆä»»æ„ï¼‰ */
  }
  .GAMES_image_s {
    width: 100%;
    /* height: auto; */
    /* max-width: 350px; */
    transform: none !important;
    scale: 1 !important;
    transition: none !important;

    /* ä¸Šä¸‹ä¸­å¤®æƒãˆ */
    top: -50%;
    transform: translate(0, -50%);
  }
  .genre {
    font-size: 2.7vw; /* çµ¶å¯¾ã«æ”¹è¡Œã•ã‚Œãªã„ã‚ˆã†ã«èª¿æ•´ */
  }
  .title {
    font-size: 4.5vw;
  }
  .catch-copy{
    font-size: 3.0vw; 
  }
  .buttontext {
    font-size: 2.0vw;
    color: #000000;
  }
  .buttontext-open {
    font-size: 1.8vw;
  }
  .button_g {
    width: 15vw;
    height: 5.0vw;
    margin: auto auto 0 0; /* å·¦ä¸‹æƒãˆ */
    top: 10%; /* åŠ¹æžœã¯ãªã„ã‚ˆã†ã&nbsp; */
    transform: translate(5%, -100%); /* ä¸‹ç«¯ã«è»¸ã‚’ç§»å‹• */
  }
  .game-wrapper:hover .button_g {
    transform: translate(180%, -100%); /* ä¸‹ç«¯ã«è»¸ã‚’ç§»å‹• */
  }
}</pre></body></html>